<script setup name="App" lang="ts">
import { storeToRefs } from 'pinia'
import { useCounterStore } from './store/counter'
// !#3 生成一个仓库实例
const counterStore = useCounterStore()
// !解构会使 Pinia 中的数据丢失响应式
// const { count, doubleCount, increment, decrement, incrementAsync } = counterStore
const { increment, decrement, incrementAsync } = counterStore
const { count, doubleCount } = storeToRefs(counterStore)
</script>
<template>
  <div>
    <p>count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <button @click="increment(2)">+2</button>
    <button @click="decrement(3)">-3</button>
    <button @click="incrementAsync(1)">+1</button>
  </div>
</template>
